标签的创建与编辑
普通标签的创建与编辑
点击底部工具栏的标签名就能在编辑区创建对应标签。
普通标签创建完标签后,光标自动聚焦到该标签,这时可以直接输入文字/贴入内容。
之前创建的普通标签也可以随时点击激活编辑状态对内容作修改。
「導詞」、「附註」、「專名」、「作品」、「引言」、「機巧」、「器件」、「字彚」、「俻忘」、「畨號」等等等等都是普通标签,它们只有语义上的差別,只是背景色和字色不一样而已。
就是说,名字不重要,分类的依据是颜色。标签分类名可以点「更名」改成自己喜欢的。
标签颜色和文字颜色暂时不能自定义,有需求可以准备好色卡找我改一版。但建议专注内容,少在意样式。
普通标签内是可以 enter 换行的,但是不建议。标签内容应尽量简短。不要折行。
这个工具的初衷是收纳零散不系统的知识碎片,以及将现在不重要但将来可能用到的信息用关键字或短语的形式记录下来,必要时再通过关键字去搜索。
专题性强的长内容最好是用专业的笔记工具。
如果有大段文字的需求,可以使用「詳釈」标签。这个标签可以收纳图文。
「附註」与「詳釈」的创建与编辑
「附註」标签用于在任何 tag 之后对其作简短补充说明。它的左边距是 0,会自动吸附到前一个标签。
即时你给它改了名字,也希望保持它的功能不变。否则它在行首会始终突出五分之一个字左右宽度。
「詳釈」是加长版的「附註」,用於大段的解释说明。它可以插入图片。
普通文字也可以插入图片,但不建议。和不建议折行的原因一样,是它会把标签撑高,让标签排布变得不紧凑。我个人不喜欢。不过你随意。我没有在功能上限制你这样做。你完全有自由探索自己的使用方式。
「鏈路」标签的创建
「鏈路」用来收纳链接。即可以是网络地址,也可以是本机硬盘路径(充当本地文件/文件夹的便捷入口)。
它和在不同笔记里存链接的不同是:不用看到一长串 url;它和浏览器网址书签的差异不大,ctrl+F 页内搜索和打开书签管理器搜索效率差不多。
点击「鏈路」后会弹窗,要求输入「链接」、「標題」、「提示」三部分内容。
在最终生成的「鏈路」标签中,「链接」是不可见的,只能看到「標題」的文字。如果鼠標指針在标签上悬停,则能看到弹出的「提示」(对网址/本地路径指向的具体说明)。
具体使用时,可以把把标题设为一个方便记忆和搜索的短词,在提示里详细说明这个链接的目的网址/文件夹是干什么的,免得自己日后忘记。
「図像」标签的创建
点击「図像」标签后,在最大的输入框贴入截图或从别处复制的图片。然后填写「図題」(标签标题),确定即可。标题就是最终显示在标签上的文字。
也可以在本地选择图像文件插入。
「図像」标签用来将图片嵌入到html文件中。嵌入的意思是以后不需要网络来加载该图片。
背后的原理,是将像素信息用 base64 编码转录,写到 html 文件里面。我写这个工具的时候,是希望它能不依赖网络,不依赖平台,不依赖软件而随身携带编辑的。而且我有一点 404
PTSD,害怕以链接形式引用图片有天会打不开。所以有了图片内嵌的需求。
这个标签的另一个好处是图片是缩小到一个字高度的,不会占用版面。鼠标指针悬停在图片上方时自动放大。但是倍数是固定一个字高的 n 倍,太长的图片放大后也看不清。
这是一个便签式笔记工具,图片在便签中的作用是展示所提之物大概是怎么个样子。存信息量很丰富的图片,尤其是长图,只能考虑其它方式。哪个工具最合适做什么,使用者心中要有清晰的认识。
再编辑性
所有普通标签都可以重新点击修改内部文字。
特殊标签都是不能修改的,只能删除重做。
「鏈路」和「図像」是特殊标签。
删除标签
先点击工具栏的 「刪除」 选项,然后在编辑区域双击任意标签都可删除之。点击 「刪畢」退出删除操作。
标签分类重命名
标签分类名就是页面下方工具栏显示的文字。
点击下方 「更名」 选项,
输入文字,
点击 重命名 按钮即可。
默認名 是重置为原始名字
特殊标签无法重命名。功能反正是写死的,改名意义不大。
星标
击下方的⭐图标,然后在任意标签上右键就能给它添加或删除特殊标记。再点击📌就能确认然后退出星标操作。
标记我设计了四个,分别是
-
「要」只比普通标签优先度高些,择机处理
-
「重」一般重要
-
「紧」一般重要但比较紧迫
-
「急」很重要又紧迫
不过,你完全没必要按我的设计来,你可以给这四个字指定别的意义。它只是一种辅助筛选手段。
过滤器
首先是按标签筛选:需要哪些标签不可见,就勾选哪些标签项。
如果点击全部,然后确定退出窗口,就能得到一个干净的编辑区。可以当作专注模式用。如果页面标签多到一定程度,先关全部再写新标签有提升页面加载性能的作用。
新增的标签项要经一次勾选和取消勾选全部 选项来刷新(让脚本读取新增标签以建立控制)
我设计了映射机制,更名以后,标签名是自动更新到过滤器的。不用手动改两个地方。
按星标筛选的逻辑是反过来的,是想显示哪一类就点哪个;
每个标签创建时都会写入一个创建日期属性,每次被编辑修改时会重写最后编辑日期属性的值。
「按創建旹間」 和
「按編輯旹間」 就是比对的时间标准。
按日期筛选的功能不健全,大概率会出bug,但不影响正常使用。一般用 ctrl+F 也够了。我想不到有特别需要按日期筛选的场景。
保存文件
原本是有保存按钮的,后来删掉了。因为使用脚本自动保存有很多弊端,且可能造成样式丢失、布局错乱问题。
目前唯一也是最保险的方法是 Ctrl+S 或 右键另存为,类型选择 html (完整 or 全部)
因为是在浏览器中编辑,当保存时,所有浏览器当前页的内容都会写进本地 html,包括
各种插件生成的乱七八糟的东西。如果浏览器装了一些会在页面中生成可见内容的插件,可能会显示在保存的文件中,破坏布局。一些插件脚本也可能写到文件里。
解决方法:找一个纯净的浏览器(没有安装会在页面中添加行为、样式或结构的插件),
比如本机自带但除了用来下载 chrome 就基本用不上的 edge,用来查看、编辑和保存此文件。
在纯净的浏览器中保存就能保证文件结构和样式不被污染。
还有一个办法就是在浏览器的无痕模式窗口打开和编辑文件。无痕窗口会屏蔽所有插件。这样保存的文件也是干净的。
版本更新和文件名
在 https://wyxxu.github.io/MeM3-html/ 获取最新版本。
不要把自己用过的文件直接发给别人,也不要在其它地方下载。谁也不能保证这些文件是干净的,或者没有恶意代码。
打开网页后什么都不要做直接 Ctrl+S 保存空白文件。存为母版。复制一份,打开,点击「開篇」按钮,输入文件名,命名后每次 Ctrl+S 保存文件都会自动填写这个文件名。
每次创建新笔记都是复制母版,再改名。
在编辑过程中,保存,一旦页面刷新或浏览器崩溃东西就都没了。自动保存的功能现在还没做,因为我不会相关技术。
注意事项
怎么插入的图片很重要
普通标签允许贴入图片。图片是怎么贴入的,影响很大。
如果是直接从网页中复制的图片,实际生成的是对网络资源的引用;在保存文件后,在 html 的相同目录,会生成一个资源文件夹把网络图片下载下来,然后网络连接自动转换成本地链接。如果这个资源文件夹和 html
分别挪到不同目录,链接丢失,图就看不到了。
<html文件名>.html
对应
<html文件名>_files 文件夹
如果是截图贴入普通标签,处理机制和「図像」标签是一样的:转为 base64 嵌入文件,然后用 data 协议引用。嵌入图片不需要关心资源文件夹的问题,但是代价很大—— html 文件轻易就到几十上百兆了。
不同浏览器能打开的最大单个html文件从 230MB 到 500MB 不等。虽然如此,但到了接近 70MB 页面加载就有些卡顿了。如果你不在意文件夹的问题,复制网络图片贴入的方式是值得推荐。
图片避让边界机制
鼠标指针在图片上悬浮时自动放大查看,有脚本控制让放大后的图片避让浏览器窗口边缘,防止图片被遮挡。但这个脚本目前只对永久结构起效。也就是说,需要保存文件后再打开,避让脚本才能对保存后的图片起效。这是动态监听上的逻辑缺陷,可以解决,但我懒得排查代码。多按一次保存没坏处。
页面结构与字体
页面布局和结构都是用 em 为单位,也即是字体的标准字号计算的。你电脑里用的默认字体,其embox
会影响显示效果。我用了自己电脑里的两种字体作为基准。在其它电脑打开页面可能在样式上会有一点小问题。但鉴于浏览器的回退机制,你电脑里没这两个字体可能都 fallback
到一个默认字体上,各个布局参数的相对比例是有保证的。
如果发现页面元素布局有点问题,拖一下浏览器窗口改变窗口宽度,脚本会激活修复布局。比如「詳釈」标签,创建完是要拉一下窗口才会自动往前一个标签贴的。你不用特地去做这件事。反正保存后再打开也会自动计算布局。
复制粘贴的技巧
我考虑过限制普通标签的内容为纯文本,但仔细想想不能剥夺使用者玩花样的自由。当你从网页或基于 前端三件套 / xml 的工具中(如 vs
code、Onenote)复制内容时,很大概率把样式带过去。但显示效果不会很好。
如果是复制一个标签的文本贴到另一个标签里面,结果可能是标签套标签。因为把原本的文本容器页复制过去了。
保险起见,一切复制来的文本,还是左手 ctrl+shift+V 为好。
我有专门设计过以文本形式写入 html 语句,自动解析为 html 元素的标签,但只能一次性,不便于修改。很容易手抖一下退出内容就白写了。所以最终放弃这个功能。
保留一切权利
请勿二次分发
聯係和反饋:
waysenhee@gmail.com
請我吃鴨腿飯: